<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>视频学习</title>
    <meta name="keywords" content="视频学习" />
    <meta name="description" content="视频学习" />
    <link href="/static/css/party/style.css" rel="stylesheet" type="text/css">
    <link href="/static/js/party/myfocus/js/mf-pattern/mF_classicHC.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/static/webjars/layui/css/layui.css" media="all">
    <script type="application/javascript" src="/static/webjars/layui/layui.js"></script>
    <script type="application/javascript" src="/static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/party/foot.css"/>

    <link href="/static/css/party/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/party/common.css" rel="stylesheet" type="text/css">
    <link href="/static/css/party/common2018.css.css" rel="stylesheet" type="text/css">
    <link href="/static/css/party/iconfont.css" rel="stylesheet" type="text/css">
    <link href="/static/js/party/jplayer/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css">


    <link href="/static/css/party/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script type="application/javascript" src="/static/js/party/template-web.js"></script>
    <script type="application/javascript" src="/static/js/party/template-web-extends.js"></script>
    <script type="application/javascript" src="/static/js/party/boorstap.min.js"></script>
    <script type="application/javascript" src="/static/js/party/common.js"></script>
    <script type="application/javascript" src="/static/js/party/jplayer/js/jplayer.playlist.js"></script>
    <script type="application/javascript" src="/static/js/party/jplayer/js/jquery.jplayer.js"></script>

</head>
<script type="text/javascript">

    <%--var data = [];--%>
    <%--for(var i=0;i<${videos.size()};i++){--%>
        <%--data[i].title = ${videos.get(i).getVideoName()};--%>
        <%--data[i].mp4 = ${videos.get(i).getLessonPath()};--%>
        <%--data[i].poster = ${videos.get(i).getPic()};--%>
    <%--}--%>
    <%--console.log(data);--%>
    jQuery.getUrlParam = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    var id = $.getUrlParam("id");
    // alert(id);
    $.post("/ajax/party/getvideos",{
        id:id
    },function (res) {
        if(res.code==0){
            $("#lessonName").html(res.lesson+"课程");
            var data = res.data;
            var arr = [];
            for(var i=0;i<data.length;i++){
                // // arr[i].title = data.videoName;
                // arr[i].mp4 = data.lessonPath;
                // arr[i].poster = data.pic;
                arr.push({"title":data[i].videoName,"m4v":data[i].lessonPath,"poster":data[i].pic});
            }
        console.log(arr);


            new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer_1",
                cssSelectorAncestor: "#jp_container_1"
            },arr, {
                swfPath: "/static/js/party/jplayer/dist",
                supplied: "webmv, ogv, m4v, oga, mp3",
                useStateClassSkin: true,
                autoBlur: false,
                size:{
                    width:"700",
                    heighr:"500",
                    cssClass:"jp-video-500p"
                },
                smoothPlayBar: true,
                keyEnabled: true,
                audioFullScreen: true
            });
        }
    })
</script>

<body>
<div class="padlogo w1200 mt50">
    <div class="danghui fl ml25"><img src="/static/images/party/img/danghui.gif"/></div>
    <div class="logo fl ml20 mt8"><img src="/static/images/party/img/logo.png"/></div>
    <div class="slogo fr"><embed src="/static/images/party/img/donghua.swf" width="600" height="150" wmode="transparent" /></div>
    <div class="clear"></div>
</div>

<div class="w1000 mt60" >
    <ul class="nav" style="text-align: center" id="dingbu">
        <li class="bg2">&nbsp;</li>
        <li class="bg2" style="width: 143px;" party-src="/party/home/index"><a href="javascript:;">首页</a></li>
        <li class="bg2" style="width: 143px" party-src="/party/home/news"><a href="javascript:;">新闻资讯</a></li>
        <li class="bg2" style="width: 143px" party-src="/party/home/education"><a href="javascript:;">教育培训</a></li>
        <li class="bg2" style="width: 143px" party-src="/party/home/service"><a href="javascript:;">服务大厅</a></li>
        <li class="bg2" style="width: 143px" party-src="/party/home/map"><a href="javascript:;">党建地图</a></li>
        <li class="bg2" style="width: 143px"><a href="/party/home/admin" target="_blank">后台管理</a></li>

        <%--<li class="bg2"><a href='/views/party/fore/index1.jsp' target='_blank'>后台管理</a></li>--%>
    </ul>


</div>
<div class='nav_bg w1000 mt30'><img src='/static/images/party/img/nav_bg.png' class='tcenter'/></div>

<div class="clearfix"></div>
<div id="lessonName" class="col-md-12" style="margin: 10px; height: 55px; font-size: 30px; text-align: center;color: #CC0000"></div>


<div style="margin-top: 50px;">
    <div id="jp_container_1" class="jp-video" style="width: 800px;margin: 0 auto;" role="application" aria-label="media player">
        <div class="jp-type-playlist">
            <div id="jquery_jplayer_1" class="jp-jplayer">


            </div>
            <div class="jp-gui">
                <div class="jp-video-play">
                    <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
                </div>
                <div class="jp-interface">
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                    <div class="jp-controls-holder">
                        <div class="jp-controls">
                            <button class="jp-previous" role="button" tabindex="0">previous</button>
                            <button class="jp-play" role="button" tabindex="0">play</button>
                            <button class="jp-next" role="button" tabindex="0">next</button>
                            <button class="jp-stop" role="button" tabindex="0">stop</button>
                        </div>
                        <div class="jp-volume-controls">
                            <button class="jp-mute" role="button" tabindex="0">mute</button>
                            <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                            <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value"></div>
                            </div>
                        </div>
                        <div class="jp-toggles">
                            <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                            <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                            <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                        </div>
                    </div>
                    <div class="jp-details">
                        <div class="jp-title" aria-label="title">&nbsp;</div>
                    </div>
                </div>
            </div>
            <div class="jp-playlist">
                <ul>
                    <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                    <li>&nbsp;</li>
                </ul>
            </div>
        </div>
    </div>


</div>









<div id="ft" class="clearfix" style="margin-top: 71px;">
    <div class="ft-center">
        <span>智慧兴文公共信息平台:&nbsp;</span>
        <a>All Rights Reserved.&nbsp;&nbsp;</a>
        <span>版权所有:&nbsp;</span>
        <a href="http://www.ituohui.com/" target="_blank">四川省数聚汇智科技有限公司</a>
    </div>
</div>

</body>
</html>

<script type="application/javascript">
    $("li[party-src]").click(function(){
        var that = $(this);
        var src = that.attr("party-src");
        window.location.href = src;
    });
</script>
